
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding: 0px;list-style: none;}
        #box{width:1400px;margin:120px auto}
        #box ul li{float: left;width:210px;margin-right:10px;margin-bottom:10px;}
        #box ul li img{width:210px;height: 280px;}
        a{text-decoration: none;color:#333333;line-height: 40px;}
        a:hover{color:orange;text-decoration: underline;}
    </style>
</head>
<body>
    <div id="box">
        <ul></ul>
    </div>
    <script>
        var ul = document.getElementById("box").getElementsByTagName("ul")[0];
        //1、创建模拟数据对象
        var arr = [
            {
                "imgsrc":"image/v_113676833_m_601_m4_260_360.webp",
                "title":"蜘蛛侠：英雄归来",
                "score":8.2,
                "infro":"小蜘蛛决战秃鹰",
                "time":"2020-04-23"
            },
            {
                "imgsrc":"image/v_114345562_m_601_m12_260_360.webp",
                "title":"后来的我们",
                "score":8.4,
                "infro":"井柏然十年苦恋",
                "time":"2020-02-14"
            },
            {
                "imgsrc":"image/v_143974594_m_601_m9_260_360.webp",
                "title":"婚姻故事",
                "score":8.6,
                "infro":"夺奥斯卡6项提名",
                "time":"2020-05-12"
            },
            {
                "imgsrc":"image/v_145160910_m_601_m3_260_360.webp",
                "title":"捍战",
                "score":7.9,
                "infro":"雨衣大盗惊现世间",
                "time":"2020-06-03"
            },
            {
                "imgsrc":"image/v_149297759_m_601_m6_260_360.webp",
                "title":"疯魔神丐苏乞儿",
                "score":7.7,
                "infro":"彭禺厶镇妖斩狂魔",
                "time":"2020-06-01"
            },
            {
                "imgsrc":"image/v_149419967_m_601_m2_260_360.webp",
                "title":"最强铁血奶爸",
                "score":7.9,
                "infro":"特种兵刘畊宏爆笑带娃",
                "time":"2020-07-29"
            }
        ]
        arr.sort(function(a,b){
            // console.log(a.score);
            // console.log(b.score);
            // return b.score - a.score; //按照评分
            return Date.parse(b.time) - Date.parse(a.time);
        })
        //操作数组，获取里面每一个对象的值,循环
        var str = "";
        for(var i = 0;i<arr.length;i++){
            // console.log(arr[i]);
            // console.log(arr[i].title)
            str+="<li><img src='"+arr[i].imgsrc+"'/><a href='#'>"+arr[i].title+"</a>&nbsp;<span>"+arr[i].score+"</span><p>"+arr[i].infro+"</p></li>";
        }
        ul.innerHTML = str;
    </script>
</body>
</html>